<template>
	<view class="region-agent-list">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">区域拓店员</block>
		</cu-custom>
		<my-empty v-if="empty"></my-empty>
		<view class="cu-list menu-avatar margin-top-xs">
			<view class="cu-item" v-for="(item, i) in list" :key="i" @tap="tel(item.mobile)">
				<view class="cu-avatar round lg" :style="{'backgroundImage': 'url(' + (item.avatar || '/static/default_avatar.png') + ')'}"></view>
				<view class="content">
					<view class="text-grey">{{item.username}}</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<text class="cuIcon-mobilefill text-blue  margin-right-xs"></text>
							{{item.mobile}}
						</view>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<text class="cuIcon-locationfill text-red  margin-right-xs"></text>
							{{item.province}}{{item.city}}{{item.area}}
						</view>
					</view>
				</view>
				<view class="action">
					<view class="text-grey">UID: {{item.uid}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import region from '@/api/region.js';
	import MyShops from '@/components/MyShops';
	export default {
		data() {
			return {
				list: [],
				empty: false,
			}
		},
		components: {
			MyShops,
		},
		created() {
			this.loadData()
		},
		methods: {
			async loadData() {
				region.agentList().then(res => {
					if (res.code === 1) {
						if (res.data.list.length <= 0) {
							this.empty = true;
							this.list = [];
						} else {
							this.empty = false;
							this.list = res.data.list;
						}
					} else {
						this.empty = true;
						this.list = [];
						this.toast(res.msg);
					}
				})
			},
			async tel(mobile) {
				if (!mobile) {
					this.toast('暂无电话');
					return;
				}
				uni.makePhoneCall({
					phoneNumber: mobile
				});
			}
		}
	}
</script>

<style>
</style>
